<template>
	<vCommonPage type="1" :typeChose="$route.query.typeChose" :title="$route.query.code == 'mzyy' ? '门诊预约':'门诊挂号'"
		:mzlx="$route.query.mzlx">
		<div slot="customContent" style="padding: 0 34px;">
			<div class="choseItemBox" v-loading.fullscreen.lock="fullscreenLoading">
				<el-calendar @click="clickDate" class="jxyCalendar" :range="range" v-model="clickDay"
					:first-day-of-week="firstOfWeek">
					<template slot="dateCell" slot-scope="{date, data}">
						<div class="cellDiv">
							<div v-if="!isChoseDay(data.day)" class="is-toDay-div">
								{{ data.day.split('-')[2] }}
							</div>
							<div v-if="data.isSelected&&isChoseDay(data.day)" class="is-selected-div">
								{{ data.day.split('-')[2] }}
							</div>
							<div v-if="!data.isSelected&&isChoseDay(data.day)" class="is-normal-div">
								{{ data.day.split('-')[2] }}
							</div>
						</div>
					</template>
				</el-calendar>
			</div>
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<div v-if="tipText" class="yiny" @click="closeYinying()"></div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getDays,
		registerSource
	} from "@api/apiBox/mzyyAndMzgh"
	import {
		getMonday,
		getDate,
		getLastDadyDay,
		changeChineToDate,
		checkFreeDayByDateStr,
		fun_date
	} from "../../assets/js/getTime.js"

	import {
		Message
	} from 'element-ui';
	export default {
		name: "mzgh",
		components: {
			Message
		},
		data() {
			return {
				rqi: [],
				fullscreenLoading: false,
				range: [],
				firstOfWeek: '',
				clickDay: '',
				toDay: changeChineToDate(new Date(), 'YYYY-MM-DD'),
				tipText: '',
				timeOut: '',
				dateList: []
			};
		},
		methods: {
			closeYinying() {
				this.tipText = "";
				clearTimeout(this.timeOut);
			},
			openFullScreen() {
				let mzlx = this.$route.query.mzlx;
				if (mzlx == 4) {
					this.$router.push({
						name: "mzyyXzys",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '2',
							type: this.$route.query.type
						},
					})
				}
				if (mzlx == 3) {
					this.$router.push({
						name: "mzyyXzsj",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '3',
							type: this.$route.query.type
						},
					})
				}
				// this.$router.push({
				// 	name: "mzyyXzks",
				// 	query: {
				// 		code: 'mzyy'
				// 	},
				// })
			},
			clickDate(data) {},
			async getDateList() {
				//  门诊类型
				// 0门诊挂号 普通号 
				// 1 门诊挂号名医号 
				// 3 门诊预约 普通号 
				// 4门诊预约名医号
				let mzlx = this.$route.query.mzlx;
				let code = this.$route.query.code;
				let deptId = '';
				//普通号 部门id存储在选择部门的时候
				if (mzlx == 3) {
					deptId = this.$store.state.appointment.department.deptId //部门ID
				}
				//名医号 部门id存储在选择医生的时候
				else if (mzlx == 4) {
					deptId = this.$store.state.appointment.doctor.deptId //部门ID
				}
				console.log('this.$store.state.appointment.doctor', this.$store.state.appointment.doctor)
				var data = {
					data: {
						hospId: this.$store.state.terminfo.hospId, //医院ID
						beginDate: changeChineToDate(new Date(), 'YYYY-MM-DD'),
						endDate: changeChineToDate(new Date(), 'YYYY-MM-DD'),
						deptId: mzlx == 3 ? deptId : '',
						doctorId: mzlx == 4 ? this.$store.state.appointment.doctor.doctorId : ''
					},
					that: this
				}
				const res = await getDays(data);
				this.dateList = res.data;
			},
			//判断是不是可以选择
			isChoseDay(day) {
				if (this.toDay == day) {
					return false;
				}
				// if (checkFreeDayByDateStr(day)) {
				// 	return false;
				// }
				for (let item of this.dateList) {
					if (item == day) {
						return true;
					}
				}
				return false;
			},
			async saveRegInfo(date, regDay) {
				let mzlx = this.$route.query.mzlx;
				let deptId = '';
				//普通号 部门id存储在选择部门的时候
				if (mzlx == 3) {
					deptId = this.$store.state.appointment.department.deptId //部门ID
				}
				//名医号 部门id存储在选择医生的时候
				else if (mzlx == 4) {
					deptId = this.$store.state.appointment.doctor.doctorId //部门ID
				}
				var data = {
					data: {
						hospId: this.$store.state.terminfo.hospId, //医院ID
						beginDate: date,
						endDate: date,
						deptId: deptId
					},
					that: this
				}
				//将日期存缓存中
				this.$store.dispatch("appointment/updateDate", regDay); //预约日期
				//前往下一个页面
				this.openFullScreen();


			}
		},
		computed: {
			dateObj: function(data) {
				return {
					'is-toDay-div': this.toDay == data.day,
					'is-selected-div': data.isSelected
				}
			}
		},
		watch: {
			clickDay(newval, oldval) {
				//点击日期
				let day = changeChineToDate(newval, 'YYYY-MM-DD');
				//今天日期
				let toDay = changeChineToDate(new Date(), 'YYYY-MM-DD');
				if (this.isChoseDay(day)) {
					for (let items of this.dateList) {
						if (items == day) {
							this.saveRegInfo(items, day);
						}
					}

				} else {
					this.tipText = "门诊预约当日不可选择，请选择其他日期，谢谢！";
					this.timeOut = setTimeout(() => {
						this.tipText = "";
						clearTimeout(this.timeOut);
					}, 2000)
				}
			}
		},
		mounted() {
			//获取可以选择的日期
			this.getDateList();
		},
		created() {
			this.firstOfWeek = new Date().getDay();
			//获取今天日期
			this.range.push(getDate(0))
			//获取下周 今天星期的前一天
			this.range.push(getMonday('e', 1, getLastDadyDay(this.firstOfWeek)))
			console.log(this.range)
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/mzghYy/xzrq.scss";

	.is-selected-div {
		width: 100%;
		height: 100%;
		background: #46C349;
		color: #FFFFFF;
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.cellDiv {
		width: 100%;
		height: 100%;
	}

	.is-toDay-div {
		width: 100%;
		height: 100%;
		background: #EEF1F3;
		color: #A1ADBB;
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.is-normal-div {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		color: #435C7A;
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;

	}
</style>
<style>
	.jxyCalendar .el-calendar-table thead th {
		text-align: center;
	}

	.warningMsg {
		font-size: 22px !important;
	}

	.jxyCalendar .el-calendar-table tbody {
		height: 100px;
	}

	.jxyCalendar .el-calendar-day {
		padding: 0px !important;
		height: 100px !important;
	}

	.jxyCalendar .el-calendar__header {
		justify-content: center;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		border: none !important;
		padding: 40px 0px 30px 0px;
	}

	.jxyCalendar .el-calendar__body {
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A1ADBB;
	}
</style>
